<script lang='ts' setup>
import { computed } from "vue";
import { type ECOption, useEcharts } from "@/hooks/useEcharts";
const props = defineProps({
  dataNumber: {
    type: Number,
    default: 0,
  },
  shareNumber: {
    type: Number,
    default: 10,
  },
  isTitle: {
    type: String,
    default: '标题'
  },
  topTitle: {
    type: String,
    default: '标题'
  },
  bottomTitle: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: "#8AFFFB",
  }
})
// const dataNumberCopy = computed(() => {
//   return props.dataNumber >= 100 ? 100 : props.dataNumber;
// });
// // 总数100,分为shareNumber份,每份的长度
// const itemNumber= computed(() => {
//   return 100 / props.shareNumber;
// });
// // dataNumber有整数份
// const dataNumber = computed(() => {
//   return Math.floor(dataNumberCopy.value / itemNumber.value);
// });
// // dataNumber有小数份
// const dataNumberDecimal = computed(() => {
//   return dataNumberCopy.value % itemNumber.value;
// });
// const dataStyle = (Proportion: number) => {
//   return {
//     value: Proportion * itemNumber.value,
//     itemStyle: {
//       color: props.color,
//     },
//   };
// };
// const EmptyStyle = computed(() => {
//   return {
//     value: 100 - props.dataNumber,
//     itemStyle: {
//       opacity: 0
//     },
//   }
// });
// const DataComputed = computed(() => {
//   const data = [];
//   for (let i = 0; i < dataNumber.value; i++) {
//     data.push(dataStyle(1));
//   }
//   if(dataNumberDecimal.value > 0){
//     data.push(dataStyle(dataNumberDecimal.value / itemNumber.value));
//   }
//   data.push(EmptyStyle.value);
//   return data;
// });
// const pieOptions = computed<ECOption>(() => {
//   const option: ECOption = {
//     series: [
//       // 主要展示层的
//       {
//         type: "pie",
//         radius: ["70%", "90%"],
//         center: ["50%", "50%"],
//         startAngle: 180,
//         clockwise: false,
//         zlevel: 10,
//         avoidLabelOverlap: false,
//         label: {
//           show: false,
//         },
//         labelLine: {
//           show: false,
//         },
//         data: DataComputed.value as any,
//         // 饼图分割线
//         itemStyle: {
//           borderColor: "#172231",
//           borderWidth: 2,
//         },
//         // 鼠标悬浮时样式
//         emphasis: {
//           disabled: true,
//         },
//         cursor: "default",
//       },
//       // 圆环
//       {
//         type: "pie",
//         zlevel: 10,
//         radius: ["95%", "100%"],
//         center: ["50%", "50%"],
//         data: [
//           {
//             value: 100,
//             itemStyle: {
//               color: props.color,
//             },
//           },
//         ],
//         // 鼠标悬浮时样式
//         emphasis: {
//           disabled: true,
//         },
//         label: {
//           show: false,
//         },
//         labelLine: {
//           show: false,
//         },
//         cursor: "default",
//       },
//     ],
//   };
//   return option;
// });
// const { domRef: lineRef } = useEcharts(pieOptions,);
</script>
<template>
  <div class="root ">
    <div class="topTitle ">
      <div>{{ props.topTitle }}</div>
      <div>{{ props.bottomTitle }}</div>
    </div>
    <!--    <div ref="lineRef" class="LeftView " />-->
    <div class="bottomTitle ">
      <span class="centerTitle" style="margin-top: 20px">{{ props.isTitle }}</span>
    </div>
  </div>
</template>

<style scoped>
.root,
.LeftView {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.LeftView {
  transform: rotateX(65deg) translateY(30px);
}

.topTitle {
  width: 100%;
  color: #fff;
  height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url("@/assets/image/echartBgImg/FrameBig.png");
  background-size: 100% 100%;
  overflow: hidden;
  background-repeat: no-repeat;
}

.topTitle div:first-child {
  color: #7DEDFF;
  font-size: 16px;
}

.topTitle div:last-of-type {
  color: #FFFFFF;
  font-size: 14px;
}

.centerTitle {
  font-size: 12px;
  font-weight: 400;
  color: #FFFFFF;
  white-space: nowrap;
}

.bottomTitle {
  flex: 1 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  background-image: url("@/assets/image/echartBgImg/roundBgimg.png");
  background-size: 100% 100%;
  overflow: auto;
  background-repeat: no-repeat;
  background-position: 0 5px;
}
</style>
